<template>
  <div>
    <!-- 联系人卡片 -->
    <van-contact-card
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />

    <!-- 联系人列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-contact-list
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </van-popup>

    <!-- 联系人编辑 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-contact-edit
        :tel-validator="()=>true"
        :contact-info="editingContact"
        :is-edit="isEdit"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>
  const OK = 200;
  import { ContactCard, ContactList, ContactEdit ,Popup} from 'vant';
  export default {
    name:"contact",
    data() {
      return {
        chosenContactId: null, //确定当前选中的联系人的id
        editingContact: {}, //回显编辑页的联系人信息
        showList: false,//联系人列表是否顯示
        showEdit: false,//联系人编辑是否顯示
        isEdit: false,//控制编辑页的删除按钮是否显示
        list: []//联系人列表页使用的联系人信息
      };
    },
    computed: {
      //代表的是卡片的类型 : add / edit
      //cardType依赖于chosenContactId
      cardType() {
        return this.chosenContactId !== null ? 'edit' : 'add';
      },

      //代表联系人卡片处于编辑状态时 需要回显的联系人
      //依赖于chosenContactId & list
      currentContact() {
        const id = this.chosenContactId;
        return id !== null ? this.list.filter(item => item.id === id)[0] : {};
      }
    },
    methods: {
      // 点击联系人列表页的 添加联系人 按钮时触发
      onAdd() {
        //新增操作时!!! 编辑页的表单就应该是空的!!!!
        this.editingContact = {};
        //编辑页的删除按钮不显示
        this.isEdit = false;
        //显示编辑页
        this.showEdit = true;
      },

      // 点击联系人列表页的 修改按钮 时触发
      onEdit(item) {
        //显示编辑页的删除按钮
        this.isEdit = true;
        //显示编辑页
        this.showEdit = true;
        //在编辑页回显当前编辑的联系人信息
        this.editingContact = item;
      },

      // 保存联系人(新增逻辑)
      async onSave(info) {
        //info:当前编辑页中表单信息(新增时不带id 修改时带id)

        //隐藏编辑页和列表页
        this.showEdit = false;
        this.showList = false;


        if (this.isEdit) {
          //修改逻辑
          // this.list = this.list.map(item => item.id === info.id ? info : item);
          //调用接口往数据库中修改一条联系人信息
          const {code,data} =  await this.$api.put("/contact/edit",info);
          if(code===OK){
            await this.getContactList()
            this.chosenContactId = data.id;
          }
        } else {
          //新增逻辑
          //this.list.push(info);
          //调用接口往数据库中新增一条联系人信息
          // const {code,data} = await this.$api.post("/contact/new/json",info);
          var formData = new FormData();
          formData.append('name', info.name);
          formData.append('tel', info.tel);
          const {code,data} = await this.$api.post("/contact/new/form",formData);
          if(code===OK){
            //引起了界面的更新(数据的实时性要求不高)
            //this.list.push(data);
            //引起了界面的更新(数据的实时性要求高)
            //新增操作 先改list 再改id
            await this.getContactList()
            //新增的那个联系人 变为选中的联系人
            this.chosenContactId = data.id;
          }
        }
      },

      // 删除联系人
      async onDelete({id}) {
        //隐藏编辑页
        this.showEdit = false;
        //将删除那一条联系人信息直接过滤掉!
        //this.list = this.list.filter(item => item.id !== info.id);
        //发请求
        const {code, message} = await this.$api.delete("/contact",{params:{id}});
        if(code===OK){
          //删除操作 要先动id 再动list
          //如果删除的是选中的那一条 chosenContactId置为null
          if (this.chosenContactId === id) {
            this.chosenContactId = null;
          }
          await this.getContactList()
        }
      },

      // 选中联系人
      onSelect() {
        //关闭列表页
        this.showList = false;
      },

      //获取数据库中联系人的数据信息
      async getContactList(){
        const {code,data} = await this.$api.get("/contactList")
        if(code === OK)
          this.list = data
      }
    },
    async created(){
        await this.getContactList()
    },
    components:{
      [ContactCard.name]:ContactCard,
      [ContactList.name]:ContactList,
      [ContactEdit.name]:ContactEdit,
      [Popup.name]:Popup
    }
  };
</script>

<style scoped>

</style>
